<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="660px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img src="@/assets/bluelogo/drawerTitle.png" alt class="titleLogo" />
        {{ title }}
      </div>
    </template>

    <div class="modalCard">
      <div class="titlefangkuai">
        <div class="fangkuai"></div>
        <div class="Header">案件基本信息</div>
      </div>
      <el-descriptions
        class="descriptions"
        label-width="120px"
        :column="1"
        size="medium"
        labelClassName="label"
        contentClassName="content"
      >
          <el-descriptions-item label="年份">{{ formData.trendYear }}年</el-descriptions-item>
          <el-descriptions-item label="立案数">{{ formData.filCase }}件</el-descriptions-item>
          <el-descriptions-item label="涉案总金额">{{ formData.caseAmount }}元</el-descriptions-item>
          <el-descriptions-item label="涉案人数">{{ formData.casePeoples }}人</el-descriptions-item>
      </el-descriptions>
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton" style="margin-right:40px">关闭</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  listTrend,
  getTrend,
  delTrend,
  addTrend,
  updateTrend,
} from "@/api/caseManage/caseStage/trend";

export default {
  inheritAttrs: false,
  components: { Treeselect },
  props: {
    detailId: {
      type: Number,
      require: true,
    },
  },

  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      formData: {
        id: null,
        trendYear: null,
        filCase: null,
        caseAmount: null,
        casePeoples: null,
      },
    };
  },
  watch: {
    detailId: {
      handler(value) {
        if (value) {
          this.reset();
          if (value) {
            getTrend(value).then((response) => {
              this.formData = response.data;
              this.open = true;
              this.title = "案件趋势详情";
            });
          }
          console.log(value);
        }
      },
      immediate: true,
    },
  },

  methods: {
    // 取消按钮
    cancel() {
      this.$emit("update:detailId", 0);
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: null,
        trendYear: null,
        filCase: null,
        caseAmount: null,
        casePeoples: null,
      };
      this.resetForm("form");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式

::v-deep .label {
  width: 120px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #5e5f61;
  display: inline-block;
  text-align: right;
}
::v-deep .content {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #aeafb0;
}
::v-deep .el-descriptions-item__container {
  margin-bottom: 15px;
}
</style>